import React, { Component } from "react";
import { Radio, Input, Divider } from "antd";
import styles from "./index.less";

const { Search } = Input;
const { Group: RadioGroup } = Radio;
// NOTE: 需自行在调用的地方设置  table columns 的 filteredValue 属性 详见 MessageSource.jsx 中的调用
const TableFilter = WrappedComponent =>
  class extends Component {
    state = {
      deptFilter: [],
      searchText: ""
    };

    getColumnSearchProps = data => ({
      onFilterDropdownVisibleChange: visible => {
        if (visible) {
          this.setState({
            deptFilter: data,
            searchText: ""
          });
        }
      },
      filterDropdown: ({
        setSelectedKeys,
        selectedKeys,
        confirm,
        clearFilters
      }) => {
        const { deptFilter = [], searchText } = this.state;
        return (
          <div className={styles.deptFilterWrap}>
            <Search
              placeholder="归属部门"
              value={searchText}
              onSearch={value => {
                const arr =
                  value === ""
                    ? data
                    : deptFilter.filter(k => k.text.includes(value));

                this.setState({
                  deptFilter: arr,
                  searchText: value
                });
              }}
              onChange={e => {
                if (e.target.value === "") {
                  this.setState({
                    deptFilter: data
                  });
                }
                this.setState({
                  searchText: e.target.value
                });
              }}
              allowClear
            />
            <RadioGroup
              onChange={e => {
                setSelectedKeys(e.target.value ? [e.target.value] : []);
              }}
              value={selectedKeys[0]}
            >
              {deptFilter.length > 0 ? (
                deptFilter.map(item => (
                  <Radio key={item.value} value={item.value}>
                    {item.text}
                  </Radio>
                ))
              ) : (
                <p style={{ textAlign: "center", padding: "8px" }}>
                  暂无数据！
                </p>
              )}
            </RadioGroup>
            <Divider />
            <div className={styles.btnWrap}>
              <a onClick={() => confirm()}>确定</a>
              <a
                onClick={() => {
                  setSelectedKeys([]);
                  this.setState(
                    {
                      searchText: ""
                    },
                    () => {
                      clearFilters();
                    }
                  );
                }}
              >
                重置
              </a>
            </div>
          </div>
        );
      }
    });

    render() {
      const props = {
        ...this.props,
        getColumnSearchProps: this.getColumnSearchProps,
        ...this.state
      };
      return <WrappedComponent {...props} />;
    }
  };

export default TableFilter;
